<template>
  <div class="menu">
    <a-menu
      v-model="selectedKeys"
      :open-keys.sync="openKeys"
      mode="inline"
      @click="menuItemClick"
    >
      <template v-for="item in data">
        <template v-if="!item.hidden">
          <sub-menu
            v-if="item.children && showChildMenu(item.children)"
            :key="item.name"
            :menu-info="item"
            :showChildMenu="showChildMenu"
            :collapsed="collapsed"
            :cutoutIconName="cutoutIconName"
          />
          <a-menu-item v-else :key="item.name">
            <c-icon
              :type="cutoutIconName(item.meta.icon)"
              v-if="item.meta.icon"
            />
            <span class="title">{{ item.meta.title }}</span>
          </a-menu-item>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { getParent } from "@/util/common";
// 这里用的是官网的递归渲染菜单，详情请前往官网 https://www.antdv.com/components/menu-cn/#components-menu-demo-single-file-recursive-menu
import { Menu } from "ant-design-vue";

const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <c-icon :type="cutoutIconName(menuInfo.meta.icon)"/><span class="title">{{ menuInfo.meta.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <sub-menu v-if="item.children&&showChildMenu(item.children)" :key="item.name" :menu-info="item" />
          <a-menu-item v-else-if="!item.hidden" :key="item.name">
            <c-icon :type="cutoutIconName(item.meta.icon)" v-if="item.meta.icon"/>
            <span class="title">{{ item.meta.title }}</span>
          </a-menu-item>
        </template>
      </a-sub-menu>
    `,
  name: "SubMenu",
  // must add isSubMenu: true
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    // 要渲染的菜单信息
    menuInfo: {
      type: Object,
      default: () => ({})
    },
    // 是否展示子菜单
    showChildMenu: {
      type: Function,
      default: () => {}
    },
    // 截取icon名称
    cutoutIconName: {
      type: Function
    }
  }
};

export default {
  name: "subMenu",
  components: {
    "sub-menu": SubMenu
  },
  props: {
    // 渲染菜单的数据
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 是否缩起菜单
    collapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedKeys: [],
      openKeys: [],
      defaultSelectedKeys: [],
      defaultOpenKeys: []
    };
  },
  watch: {
    // data() {
    //   // 监听菜单是否变化
    //   this.getDefaultkey(this.data);
    // },
    collapsed(newVal) {
      // 解决展开菜单时对应的子菜单没有展开
      if (!newVal) {
        this.getDefaultOpenkeys(this.$route.name);
      } else {
        // 解决缩进侧边栏时子菜单会弹出
        this.openKeys = [];
      }
    },
    $route() {
      this.getDefaultkey();
      // this.getDefaultkey(this.data);
    }
  },
  methods: {
    // 是否需要展示子菜单
    showChildMenu(children) {
      /*
       *  @children 要查询的路由
       */
      let hidden = children.filter(i => i.hidden);
      if (hidden.length === children.length) {
        return false;
      } else {
        return true;
      }
    },
    menuItemClick(e) {
      this.$router.push({ name: e.keyPath[0] });
    },
    // 查找初始选中的菜单项
    getDefaultkey() {
      this.selectedKeys = [this.$route.meta.menuName || this.$route.name];
      // if (this.defaultSelectedKeys.length === 0)
      //   this.defaultSelectedKeys = [this.$route.name];
      this.getDefaultOpenkeys(this.$route.name);
    },
    // 查找初始打开的菜单
    getDefaultOpenkeys(name) {
      /*
       *  @name 路由的name
       */
      let asyncRouter = this.$store.state.router.asyncRouter;
      for (let i = 0; i < asyncRouter.length; i++) {
        if (asyncRouter[i].flag === name) {
          let keyArr = getParent(this.data, asyncRouter[i].id);
          this.openKeys = [keyArr[0].name];
          // if (this.defaultOpenKeys.length === 0) {
          //   this.defaultOpenKeys = [keyArr[0].name];
          //   // console.log('defaultOpenKeys');
          // }
        }
      }
    },
    cutoutIconName(iconName) {
      let n;
      if (iconName) {
        n = iconName.slice(5);
      } else {
        n = "";
      }
      return n;
    }
  },
  created() {
    this.getDefaultkey();
  }
};
</script>

<style lang="scss" scoped>
.ant-menu-inline-collapsed {
  ::v-deep .title {
    opacity: 0;
  }
}
</style>
